<template>
<!-- 业务数据疑点 -->
  <div class="content-center">
    <div class="content-cotainer border-box">
        <!-- 面包屑 -->
        <breadcrumb />
        <!-- 页面内容-->
        <div class="audit-content">
          <!-- 页面title -->
            <div class="centent-title">
                <span>{{$route.meta.title}}</span>
            </div>
            <!-- 页面主体 -->
            <div class="centent-inner">
              <div class="btn-left">
                <span class="btn-primary" v-for="(item,index) in btnList" :key="index" @click="currentBtn(item,index)">{{item.title}}</span>
              </div>

              <div class="inner-table">
                <el-table
                  ref="multipleTable"
                  :data="tableData1"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @selection-change="handleSelectionChange">
                  <el-table-column
                    type="selection"
                    width="50">
                  </el-table-column>
                  <el-table-column
                    type="index"
                    label="序号"
                    width="80">
                  </el-table-column>
                  <el-table-column
                    label="创建人"
                    width="150">
                    <template slot-scope="scope">{{ scope.row.name }}</template>
                  </el-table-column>
                  <el-table-column
                    prop="date"
                    label="凭证日期"
                    width="200">
                  </el-table-column>
                  <el-table-column
                    prop="method"
                    label="审计方法名称"
                    show-overflow-tooltip>
                  </el-table-column>
                </el-table>
              </div>

              <el-tabs type="border-card">
                <el-tab-pane>
                  <span slot="label"> 未落实疑点</span>
                  未落实疑点
                </el-tab-pane>
                <el-tab-pane label="已落实疑点">
                  <div class="inner-table">
                    <el-table :data="tableData2" stripe style="width: 100%;" @cell-click="selectCell">
                      <el-table-column type="index" label="序号" width="120"></el-table-column>
                      <el-table-column prop="type" label="科目编码" width="300"></el-table-column>
                      <el-table-column :show-overflow-tooltip="true" prop="name" label="科目名称" width="300"></el-table-column>
                      <el-table-column :show-overflow-tooltip="true" prop="yearBegin" label="年初余额" width="300"></el-table-column>
                      <el-table-column :show-overflow-tooltip="true" prop="yearOver" label="年末余额"></el-table-column>
                    </el-table>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import breadcrumb from '@/components/breadcrumb'
export default {
  data(){
    return {
      //按钮
      btnList:[
        {
          id:0,
          title:'落实疑点'
        },
        {
          id:1,
          title:'删除疑点'
        },
        {
          id:2,
          title:'疑点说明'
        },
        {
          id:3,
          title:'详细内容'
        },
        {
          id:4,
          title:'选择'
        },
        {
          id:5,
          title:'全部选择'
        },
        {
          id:6,
          title:'全部取消'
        },
        {
          id:7,
          title:'发送数据'
        },
      ],
      multipleSelection:[],
      tableData1: [
        {
          date: '2016-05-03',
          name: '王小虎',
          method: '上海市普陀区金沙江路 1518 弄'
        }, 
        {
          date: '2016-05-02',
          name: '王小虎',
          method: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          method: '上海市普陀区金沙江路 1518 弄'
        }, 
        {
          date: '2016-05-01',
          name: '王小虎',
          method: '上海市普陀区金沙江路 1518 弄'
        }, 
        {
          date: '2016-05-08',
          name: '王小虎',
          method: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      tableData2:[
        {
          type:'121202',
          name:'应收租金',
          yearBegin:'748,897',
          yearOver:'748,897'
        },
        {
          type:'121202',
          name:'应收租金',
          yearBegin:'748,897',
          yearOver:'748,897'
        },
        {
          type:'121202',
          name:'应收租金',
          yearBegin:'748,897',
          yearOver:'748,897'
        },
        {
          type:'121202',
          name:'应收租金',
          yearBegin:'748,897',
          yearOver:'748,897'
        },
        {
          type:'121202',
          name:'应收租金',
          yearBegin:'748,897',
          yearOver:'748,897'
        },
      ]
    }
  },
  methods:{
    currentBtn(item,index){
      alert(item.title)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection)
    },
    selectCell(val){
      console.log(val)
    }
  },
  components:{
    breadcrumb
  }
};
</script>

<style lang="less" scoped>
  .content-cotainer{
    padding: 0 20px 20px 20px;
    height: 100%;
    .centent-inner{
      padding: 0 20px 20px 20px;
    }
  }
  .btn-left{
    height: 76px;
    &>span{
      width: 88px;
    }
  }
  .inner-table{
    margin-bottom: 50px;
  }
</style>